<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <!-- 引入 Bootstrap -->
        <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.css">
        <link rel="stylesheet" href="./layui/css/layui.css">
        <title>BS模板</title>
        <style>
            html,body{
                height: 100%;
            }
            #navbar-example{
                width: 40px;
                left: 40px;
                top: 50%;
                transform: translateY(-50%);
            }
            #navbar-example .nav li{
                float: none;
                width: 40px;
                text-align: center;
                border-bottom: 1px solid #eee;
            }
            #navbar-example .nav li.active a {
                /* background-color: red; */
            }
            #navbar-example .nav li a{
                padding: 10px 5px;
                font-size: 12px;
                color: #aaa;
            }
            #navbar-example .nav li a span{
                display: none;
            }
            #navbar-example .nav li .nav_floor_icon{
                display: inline-block;
                background-image: url("./icon.png");
                width: 20px;
                height: 20px;
            }
            #navbar-example .nav li.active a span{
                display: inline;
            }
            #navbar-example .nav li.active a .nav_floor_icon{
                display: none;
            }
            .dropdown_right{
                /* display: none; */
                transition: width 1s;
                width: 0px;
                overflow: hidden;
            }
            .list-group{
                position: relative;
            }
            .list-group-item{
                position: static;                
            }
            .list-group-item:hover .dropdown_right{
                /* display: block; */
                width: 800px;
            }

        </style>
    </head>
    <body data-spy="scroll" data-target="#navbar-example" data-offset="20">
        <nav id="navbar-example" class="navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="">
                <ul class="nav navbar-nav">
                    <li data-pos="10">
                        <a href="#ios">
                            <span>机械设备</span>
                            <i class="nav_floor_icon" style="background-position-x:926px;"></i>
                        </a>
                    </li>
                    <li data-pos="1050">
                        <a href="#svn">
                            <span>农林牧副</span>
                            <i class="nav_floor_icon" style="background-position-x:905px;"></i>
                        </a>
                    </li>
                    <li data-pos="2390">
                        <a href="#java">
                            <span>建筑建材</span>
                            <i class="nav_floor_icon" style="background-position-x:862px;"></i>
                        </a>
                    </li>
                </ul>
            </div>
        </nav>
        <div class="container">
            <h4 id="ios">iOS</h4>
            <div style="height:1000px;background-color:red;">机械设备
                <div id="myCarousel" class="carousel slide">
                    <!-- 轮播（Carousel）指标 -->
                    <ol class="carousel-indicators">
                        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                        <li data-target="#myCarousel" data-slide-to="1"></li>
                        <li data-target="#myCarousel" data-slide-to="2"></li>
                        <li data-target="#myCarousel" data-slide-to="2"></li>
                    </ol>
                    <!-- 轮播（Carousel）项目 -->
                    <div class="carousel-inner">
                        <div class="item active">
                            <img src="./imgs/0.jpg" alt="First slide">
                        </div>
                        <div class="item">
                            <img src="./imgs/1.jpg" alt="Second slide">
                        </div>
                        <div class="item">
                            <img src="./imgs/2.jpg" alt="Third slide">
                        </div>
                        <div class="item">
                            <img src="./imgs/complete.jpg" alt="Third slide">
                        </div>
                    </div>
                    <!-- 轮播（Carousel）导航 -->
                    <a class="carousel-control left" href="#myCarousel" data-slide="prev">
                        <span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span>
                    </a>
                    <a class="carousel-control right" href="#myCarousel" data-slide="next"><span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span></a>
                </div>
            </div>
            <h4 id="svn">SVN</h4>
            <div style="height:1500px;background-color:green;position:relative;">
                农林牧副
                <ul class="list-group" style="width:100px;">
                    <li class="list-group-item" style="height:80px;">
                        免费域名注册
                        <div class="dropdown_right" style="height:400px;background-color:red;position:absolute;top:0px;left:100px;">
                            <div style="width:800px;">附件ask劳动纠纷空间的开发骄傲丰富的接口就考虑JFK了金风科技刻录机刻录机看 发射点发射点发阿迪斯发放大安抚a附件ask劳动纠纷空间的开发骄傲丰富的接口就考虑JFK了金风科技刻录机刻录机看 发射点发射点发阿迪斯发放大安抚a附件ask劳动纠纷空间的开发骄傲丰富的接口就考虑JFK了金风科技刻录机刻录机看
                            发射点发射点发阿迪斯发放大安抚a附件ask劳动纠纷空间的开发骄傲丰富的接口就考虑JFK了金风科技刻录机刻录机看 发射点发射点发阿迪斯发放大安抚a附件ask劳动纠纷空间的开发骄傲丰富的接口就考虑JFK了金风科技刻录机刻录机看 发射点发射点发阿迪斯发放大安抚a附件ask劳动纠纷空间的开发骄傲丰富的接口就考虑JFK了金风科技刻录机刻录机看
                            发射点发射点发阿迪斯发放大安抚a附件ask劳动纠纷空间的开发骄傲丰富的接口就考虑JFK了金风科技刻录机刻录机看 发射点发射点发阿迪斯发放大安抚a附件ask劳动纠纷空间的开发骄傲丰富的接口就考虑JFK了金风科技刻录机刻录机看 发射点发射点发阿迪斯发放大安抚a</div>
                        </div>
                    </li>
                    <li class="list-group-item" style="height:80px;">免费 Window 空间托管</li>
                    <li class="list-group-item" style="height:80px;">图像的数量</li>
                    <li class="list-group-item" style="height:80px;">24*7 支持
                        <div class="dropdown_right" style="height:400px;background-color:red;position:absolute;top:0px;left:100px;">
                            <div style="width:800px;">附件ask劳动纠纷空间的开发骄傲丰富的接口就考虑JFK了金风科技刻录机刻录机看 发射点发射点发阿迪斯发放大安抚a附件ask劳动纠纷空间的开发骄傲丰富的接口就考虑JFK了金风科技刻录机刻录机看 发射点发射点发阿迪斯发放大安抚a附件ask劳动纠纷空间的开发骄傲丰富的接口就考虑JFK了金风科技刻录机刻录机看
                                发射点发射点发阿迪斯发放大安抚a附件ask劳动纠纷空间的开发骄傲丰富的接口就考虑JFK了金风科技刻录机刻录机看 发射点发射点发阿迪斯发放大安抚a附件ask劳动纠纷空间的开发骄傲丰富的接口就考虑JFK了金风科技刻录机刻录机看 发射点发射点发阿迪斯发放大安抚a附件ask劳动纠纷空间的开发骄傲丰富的接口就考虑JFK了金风科技刻录机刻录机看
                                发射点发射点发阿迪斯发放大安抚a附件ask劳动纠纷空间的开发骄傲丰富的接口就考虑JFK了金风科技刻录机刻录机看 发射点发射点发阿迪斯发放大安抚a附件ask劳动纠纷空间的开发骄傲丰富的接口就考虑JFK了金风科技刻录机刻录机看 发射点发射点发阿迪斯发放大安抚a</div>
                        </div>
                    </li>
                    <li class="list-group-item" style="height:80px;">
                        每年更新成本
                        <div class="dropdown_right" style="height:400px;background-color:red;position:absolute;top:0px;left:100px;">
                            <div style="width:800px;">附件ask劳动纠纷空间的开发骄傲丰富的接口就考虑JFK了金风科技刻录机刻录机看 发射点发射点发阿迪斯发放大安抚a附件ask劳动纠纷空间的开发骄傲丰富的接口就考虑JFK了金风科技刻录机刻录机看 发射点发射点发阿迪斯发放大安抚a附件ask劳动纠纷空间的开发骄傲丰富的接口就考虑JFK了金风科技刻录机刻录机看
                            发射点发射点发阿迪斯发放大安抚a附件ask劳动纠纷空间的开发骄傲丰富的接口就考虑JFK了金风科技刻录机刻录机看 发射点发射点发阿迪斯发放大安抚a附件ask劳动纠纷空间的开发骄傲丰富的接口就考虑JFK了金风科技刻录机刻录机看 发射点发射点发阿迪斯发放大安抚a附件ask劳动纠纷空间的开发骄傲丰富的接口就考虑JFK了金风科技刻录机刻录机看
                            发射点发射点发阿迪斯发放大安抚a附件ask劳动纠纷空间的开发骄傲丰富的接口就考虑JFK了金风科技刻录机刻录机看 发射点发射点发阿迪斯发放大安抚a附件ask劳动纠纷空间的开发骄傲丰富的接口就考虑JFK了金风科技刻录机刻录机看 发射点发射点发阿迪斯发放大安抚a</div>
                        </div>
                    </li>
                </ul>
                
            </div>
            <h4 id="java">jMeter</h4>
            <div style="height:1500px;background-color:blue;">建筑建材</div>
        </div>
    </body>
    <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
    <script src="./bootstrap-3.4.1-dist/js/jquery-3.5.1.js"></script>
    <!-- 包括所有已编译的插件 -->
    <script src="./bootstrap-3.4.1-dist/js/bootstrap.js"></script>
    <script src="./layui/layui.js"></script>
    <script>
        // var lis = document.querySelectorAll(".list-group-item");
        // var dropdown_right = document.querySelector(".dropdown_right");
        // var data = ["内容1","内容2","内容3","内容4"];
        // dropdown_right.onmouseover = function(){
        //     this.style.display = "block";
        // }
        // dropdown_right.onmouseleave = function () {
        //     this.style.display = "none";
        // }
        // lis.forEach((li,index)=>{
        //     li.onmouseover = function(){
        //         dropdown_right.style.display = "block";
        //         dropdown_right.textContent = data[index];
        //     }
        //     li.onmouseleave = function () {
        //         dropdown_right.style.display = "none";
        //     }
        // })

        
        // document.body.onscroll = function(){
        //     // 10
        //     // 1050
        //     // 2390
        // }

        var navA = document.querySelectorAll(".nav.navbar-nav li a");
        navA.forEach(a=>{
            a.onclick = function(e){
                e.preventDefault();
                
                // 当前位置
                console.log(document.documentElement.scrollTop);
                // 目标位置
                var floor = document.getElementById(this.href.split("#")[1]).offsetTop
                console.log(floor);
                var distance = floor - document.documentElement.scrollTop;
                // 速度一致
                var speed = distance / 50;
                // 时间
                // var time = Math.abs(distance / 100); 
                // console.log(time);
                var interval = setInterval(function(){
                    document.documentElement.scrollTop += speed;
                    if (Math.abs(document.documentElement.scrollTop - floor) <= 20) {
                        clearInterval(interval);
                        console.log("11111");
                    }
                }, 10)
            }
        })

        // var svn = document.getElementById("svn");
        // console.log(svn.offsetTop);
    </script>
</html>